<ng-container [formGroup]="form">
  <ng-container formArrayName="headers">
    <div class="row headers-list" *ngFor="let header of form.get('headers')['controls']; index as headerIndex" [formGroupName]="headerIndex">
      <div class="col">
        <div class="input-group" style="position: relative;">
          <input type="text" class="form-control col-4 mr-1" placeholder="name" formControlName="key" [ngbTypeahead]="search('headerNames')">
          <input type="text" class="form-control col-6" placeholder="value" formControlName="value" [ngbTypeahead]="search('headerValues')">
          <div class="input-group-prepend clickable">
            <span class="input-group-text p-1 text-danger" (click)="removeHeader(headerIndex)" ngbTooltip="Remove"><i class="material-icons">delete</i></span>
          </div>
          <div class="input-group-prepend" *ngIf="testHeaderValidity(header.get('key')?.value)">
            <span class="input-group-text p-1 text-warning" ngbTooltip="Header key contains prohibited characters and won't be used"><i class="material-icons">warning</i></span>
          </div>
          <div class="input-group-prepend" *ngIf="((header.get('key')?.value && !header.get('value')?.value) || (!header.get('key')?.value && header.get('value')?.value) || (!header.get('key')?.value && !header.get('value')?.value)) && headerIndex < (form.get('headers')['controls'].length - 1)">
            <span class="input-group-text p-1 text-warning" ngbTooltip="Headers with empty name or value are ignored"><i class="material-icons">warning</i></span>
          </div>
        </div>
      </div>
    </div>
    <button type="button" class="btn btn-link btn-icon mt-2" (click)="addHeader()">
      <i class="material-icons text-success">add_box</i> Add header
    </button>
  </ng-container>
</ng-container>
